import React from "react";
import { List, Icon } from 'antd'
import classNames from "classnames"

const { Item } = List;

const TodoList = ({ todos, onDelete }) => {
    // const onDelete = () => {}
    return (
        <div className="list-wrap">
            {/* {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} */}
            {todos.length === 0 ? (
                <p>暂无代办事项</p>
            ) : (
                <List // List 来自 antd 逻辑：配置数据源+每一个输出
                    itemLayout="horizontal"
                    // horizontal-水平的，横的
                    dataSource={todos} // 数据源
                    renderItem={({ id, text, finished }, index) => { // 每一个输出
                        const className = classNames({
                            "list-item": true,
                            "list-item__finished": finished
                        })
                        return (
                            // <List.Item>
                            <Item className={className}>
                                <div className="list-item-wrap" >
                                    <span className="list-item-text">{text}</span>
                                    <Icon type='delete' onClick={onDelete.bind(null, id)} />
                                </div>
                            </Item>
                        )
                    }}
                />
            )}
        </div>
    )
}

export default TodoList